<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fun" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE HTML>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<base href="<%=basePath%>">
<html lang="zn-cn">
<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>关注列表</title>
    <link rel="stylesheet" href="css/base.css">
    <style type="text/css">
        .unbind_box {
            height: 260px;
        }
        .card_wrap{
            padding: 5px 15px 5px;
        }
        .getMoreOrder:after, .noMoreOrder:after {
            position: relative;
        }
    </style>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/base.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/handle.js"></script>
</head>
<body class="ed" style="position:relative">
<input type="hidden" class="memberNum">
<div class="wrap cardmng_wrap">
    <div class="card_list">
    </div>
    <div class="addCardBtn none" onclick="joinGroup()">
        <img src="img/add_blue.png">添加组织
    </div>
</div>
<div class="mask_layer none">
    <div class="unbind_box">
        <p class="unbindBtn" id="seeIntroduce">查看介绍</p>
        <p class="unbindBtn" id="unbindCard">取消关注</p>
        <p class="unbindBtn" id="shareGroup">分享</p>
        <p class="cancelBtn">取消</p>
    </div>
</div>
<div class="mask_layer2 none"></div>
<div class="nocard">
    <img src="img/nobindcard.png">
    <h3>你没有加入任何团队哦</h3>
</div>

<div class="toast toast_timeout" style="display:none">网络异常，请稍后重试！</div>
<div class="toast toast_error" style="display:none">信息输入有误</div>
<div class="loading" style="display:none">
    <img src="img/loading.gif"></div>
<script type="text/javascript">

    var noMoreOrderText = "<div class='noMoreOrder'></div>";
    var getMoreOrderText = "<div class='getMoreOrder'></div>";
    var currentPage = 1;
    var orgId = "";// 解绑的卡号
    var fromPage = "${fromPage}";

    $(function () {

        $(".wrap").on('click', '.getMoreOrder', function (e) {
            getCardList();
        });

        getCardList(); // 绘制卡列表的dom
        // 点击卡片弹出提示框
        $("body").on("click", ".card_wrap", function (e) {
            orgId = $(this).attr("data-cardno");
            console.log(orgId);
            $(".mask_layer").removeClass('none')
            $(".unbind_box").animate({
                    bottom: 0
                },
                100, function () {

                });
        });

        // 点击解绑 解绑卡片
        $("#unbindCard").click(function (e) {
            $(".mask_layer").addClass('none')
            $(".unbind_box").animate({
                    bottom: -139
                },
                100, function () {

                });
            unBindCard(orgId, fromPage, function () {
                console.log(orgId)
                // 发请成功后的操作
                $(".card_wrap[data-cardNo=" + orgId + "]").slideUp(300, function (e) {
                    $(this).remove();
                    if ($(".card_list").children().length == 0) {
                        $(".nocard").removeClass('none');
                        $(".wrap").addClass('none');
                    }
                });
            });
        });

        $("#seeIntroduce").click(function (e) {
            window.location.href = "wxmp/info/group?oid=" + orgId;
        });

        // 点击取消，收起弹出框
        $(".cancelBtn").click(function (e) {
            $(".unbind_box").animate({
                    bottom: -139
                },
                100, function () {
                    $(".mask_layer").addClass('none')
                });
        });
        $("#shareGroup").click(function () {
            $(".cancelBtn").click();
            var textQr = "http://qr.topscan.com/api.php?text=JOIN_GROUP";
            var memberNum = "${memberNum}";
            var text = '<div class="alert-box-with-btn">'
            var imgUrl = textQr + oid + "?fromUser=" + memberNum;
            console.log(imgUrl);
            text += '<img src="' + imgUrl + '">'
            text += '<p class="alert-box-btn">使用公众号内扫一扫菜单</p>'
            text += '</div>'
            $(".mask_layer2").append(text).removeClass('none');
        })
        $(".mask_layer2").click(function () {
            $(".mask_layer2, .mask_layer2 > div").addClass('none');
        })
    })
    function getCardList() {
        console.log('step into getCardList()')
        var data = {
            pageNum: currentPage,
            pageSize:10,
            usePager:"true"
        }
        $(".loading").show();
        $.ajax({
            url: $.httpRootPath() + 'rest/yellow/getFollow',
            type: 'GET',
            dataType: 'json',
            data: data,
            cache: false,
            timeout: 15000,
            success: function (r) {
                $(".getMoreOrder,.card_list .noMoreProduct").remove();

                $(".loading").hide();
                if (r.code != "00") {
                    errorToast(r.msg, 3);
                    return false;
                }
                $("body").append("");

                var list = [];
                for (var i = 0; i < r.data.length; i++) {
                    var obj = r.data[i];
                    var name = obj.name; //组织名
                    var type = obj.type; //组织名
                    var oid = obj.id;
                    list.push([name, type, "", "", oid]);
                }
                loadCard(list, r.pager);
            },
            error: function (e) {
                console.log(e);
                $(".loading").hide();
                $(".norecordbox").append(norecordText);
                ajaxErrorEvent(e);

            }
        });
    }


    // 根据卡列表的长度加载页面
    function loadCard(list,pager) {
        console.log(list);
        if (!list) {
            return;
        }

        var clr;
        if (list.length == 0) {
            $(".nocard").removeClass('none');
            $(".wrap").addClass('none');
        } else {
            for (var i = 0; i < list.length; i++) {
                if (list[i][1] == 0) {
                    clr = "blue";
                } else if (list[i][1] == 1){
                    clr = "ot";
                }else {
                    clr = "red"
                }
                var limitdate = "<img src='img/xinxi.png'><span>";
                var innerText = "<div class='card_wrap card_wrap_" + clr + "' data-cardNo='"
                    + list[i][4]
                    + "'>"
                    + "<h3> <i class = 'icon_card '></i>"
                    + list[i][0]
                    + "<span>"
                    + " <i>"
                    +""
                    + "</i>"
                    + "</span></h3>"
                    /*                        + "<h6>"
                                            + depName + " - " + proName
                                            + "</h6>"
                                        "<input type='hidden' value=" + list[i][4] + ">"*/
                    + "</div>";
                $(".card_list").append(innerText);
            } ;
            // 有下一页 显示加载更多的按钮
            if (pager.hasNextPage) {
                $(".card_list").append(getMoreOrderText);
                currentPage++;
            } else {
                $(".card_list").append(noMoreOrderText);

            }
            $(".nocard").addClass('none');
            $(".wrap").removeClass('none');
        }
    }
    function joinGroup() {
        window.location.href = 'wxmp/group/add?fromPage=followList';
    }
</script>
</body>
</html>